<template>
  <!-- 审批页面 -->
  <el-form :model="recode"  >
    <el-form-item label="申请人:" style="width: 400px">
      <el-input v-model="recode.applicationName" autocomplete="off" />
    </el-form-item>
    <el-form-item label="部门:">
      <el-select v-model="recode.depId" placeholder="请选择部门" style="width: 400px">
        <el-option label="请选择部门" :value="0"></el-option>
        <el-option label="IT信息部" :value="1"></el-option>
        <el-option label="人力资源部" :value="2"></el-option>
        <el-option label="财务部" :value="3"></el-option>
        <el-option label="销售部" :value="4"></el-option>
        <el-option label="行政部" :value="5"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="请假原由:" style="width: 400px">
      <el-input v-model="recode.reason" autocomplete="off" />
    </el-form-item>

    <el-form-item label="审批人:" style="width: 400px">
      <el-input v-model="recode.approvalName" autocomplete="off" />
    </el-form-item>
    <el-form-item label="请假时间：">
      <div class="time-range">
        <el-date-picker
          v-model="recode.approvalCreatetime"
          type="datetime"
          placeholder="开始时间"
          value-format="YYYY-MM-DD HH:mm"
        />
      </div>
    </el-form-item>

    <el-form-item label="审核:" style="width: 400px">
      <el-radio-group v-model="recode.approvalOpinion">
      
        <el-radio label="拒绝" value="拒绝" @click="save(1, '拒绝')"
          >拒绝</el-radio
        >

        <el-radio label="通过" value="通过" @click="save(0, '通过')"
          >通过</el-radio
        >
      </el-radio-group>
    </el-form-item>
  <!--审批记录表格  -->
   <div style="display: flex;" >
    <table  border="1"
      v-for="(item, index) in records"
      style="width: 100%; border-collapse: collapse; margin-bottom: 20px"  :inline="true">
       <tr>
        <td colspan="4" style="font-weight: bold">审核第{{ index + 1 }}步</td>
      </tr>
      <tr>
        <td style="width: 100px">审核人</td>
        <td>{{ item.approvalName }}</td>
        <td>审核结果</td>
        <td>{{ item.approveStatus==0 ?"拒绝":"通过"}}</td>
      </tr>
      <tr>
        <td style="width: 100px">审核时间</td>
        <td>{{ item.createTime.substring(0, 19).replace("T", " ") }}</td>
        <td>审核意见</td>
        <td>{{ item.approvalOpinion }}</td>
      </tr>
    </table>
  </div>
    <!-- 拒绝原因输入框 -->
    <el-form-item
      v-if="recode.approvalOpinion === '拒绝'"
      label="拒绝原因:"
      prop="reasonrejection"
      :rules="[{ required: true, message: '必须填写拒绝原因' }]"
    >
      <el-input
        v-model="model.reasonrejection"
        type="textarea"
        :rows="3"
        placeholder="请输入详细拒绝原因（至少10个字）"
        show-word-limit
        maxlength="200"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="create()">更新</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>


</template>

<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import moment from "moment";
import { compile, computed, nextTick, onMounted, reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useCounterStore } from "@/stores/counter";
import DepData from "@/stores/departmentData";
import axios from "axios";
import { ElTree } from "element-plus";
import type { AnyColumn } from "element-plus/es/components/table-v2/src/common.mjs";
import { pa } from "element-plus/es/locales.mjs";

//pini保存
const store = useCounterStore();
//跳转
const router = useRouter();
const route = useRoute();

const recode = reactive({
  recordId: 0,
  applicationId: 0,
  applicationName: "",
  depId: 0,
  approvalName: "",
  reason: "",
  approveStatus: 0,
  approvalOpinion: "",
  approvalCreatetime: "",
});
const Approvalspage = ref(false);

onMounted(() => {
  //  getRecords();
  fanTianRecord();
 
});
const fanTianRecord = () => {
  Approvalspage.value = true;
  axios
    .get("https://localhost:7174/api/Message/FanTianRecord", {
      params: { ApplicationId: route.query.applicationId },
    })
    .then((res) => {
      console.log(res.data.data, "审批信息");
      recode.recordId = res.data.data[0].recordId;
      recode.applicationName = res.data.data[0].applicationName;
      recode.applicationId = res.data.data[0].applicationId;
      recode.depId = res.data.data[0].depId;
      recode.approvalName = store.ccstore.userName;
      recode.reason = res.data.data[0].reason;
      recode.approvalOpinion = res.data.data[0].approvalOpinion;
      recode.approvalCreatetime = res.data.data[0].approvalCreatetime;
    });
};

const model = reactive<any>({
  applicationId: 0,
  approveStatus: 0,
  approvalOpinion: "",
  userName: "",
  reasonrejection: "",
});

const save = (approveStatus: number, approvalOpinion: string) => {
  model.approveStatus = approveStatus;
  model.approvalOpinion = approvalOpinion;
  console.log(model.approveStatus);
};

const create = () => {
  const commend = <any>{};
  commend.applicationId = route.query.applicationId;
  commend.approveStatus = model.approveStatus;
  commend.approvalOpinion = model.approvalOpinion;
  commend.userName = store.ccstore.userName;
  commend.reasonrejection = model.reasonrejection;

  axios
    .post("https://localhost:7272/api/Message/AppUpdata", commend)
    .then((res) => {
      console.log(res.data.data, "审批信息");
      if (res.data.code == 100) {
        ElMessage.success(res.data.msg);
        router.push("/GetLeaveRequestsView");
        return;
      } else {
        ElMessage.error(res.data.msg);
        return;
      }
    });
};

const records = ref<any>([]);
 
 const getRecords = () => {
  axios
    .get("http://localhost:5121/api/MyForm/RecordQuery", {
      params: {
        ApplicationId:  route.query.applicationId
      },
    })
    .then((res) => {
      console.log(res.data.data[0], "审批记录");
      records.value = res.data.data;
    });
}; 
</script>

<style scoped>
</style>